<template>
  <div
  v-show="false"
    class="basemapToggleDiv"
    @mouseenter="mouseEnterEvent"
    @mousemove="mouseEnterEvent"
    @mouseleave="mouseLeaveEvent"
  >
    <Row :gutter="8">
      <transition
        name="basemap"
        enter-active-class="animate__animated animate__slideInRight faster"
        leave-active-class="animate__animated animate__slideOutRight faster"
      >
        <Col span="12" v-if="isTdtShow" class="container">
          <div id="tdt" @click="clickEvent('tdt')">
            <img src="../../assets/yzt/tdt.jpg" alt="天地图" />
            <div class="zhezhao">
              <div class="basemapBz">地图</div>
            </div>
          </div>
        </Col>
      </transition>
      <transition
        name="basemap"
        enter-active-class="animate__animated animate__slideInLeft faster"
        leave-active-class="animate__animated animate__slideOutLeft faster"
      >
        <Col span="12" v-if="isTdtyxShow" class="container">
          <div id="tdtyx" @click="clickEvent('tdtyx')">
            <img src="../../assets/yzt/tdtyx.jpg" alt="天地图影像" />
            <div class="zhezhao">
              <div class="basemapBz">影像图</div>
            </div>
          </div>
        </Col>
      </transition>
    </Row>
  </div>
</template>
<script>
import { mapState } from "vuex";

export default {
  name: "BasemapToggle",
  props: ["basemap"],
  data() {
    return {
      isTdtShow: false,
      isTdtyxShow: true,
    };
  },
  computed: {
    ...mapState({
      onemapState: (state) => state.oneMap.map,
    }),
  },
  methods: {
    mouseEnterEvent() {
      this.isTdtShow = true;
      this.isTdtyxShow = true;
    },
    clickEvent(type) {
      switch (type) {
        case "tdt":
          this.onemapState.basemap = this.basemap.tdtBasemap;
          break;
        case "tdtyx":
          this.onemapState.basemap = this.basemap.tdtyxBasemap;
          break;
      }
    },
    mouseLeaveEvent() {
      if (this.onemapState.basemap.id == "tdt") {
        this.isTdtShow = false;
        this.isTdtyxShow = true;
      } else {
        this.isTdtShow = true;
        this.isTdtyxShow = false;
      }
    },
  },
};
</script>
<style scoped>
.basemapToggleDiv {
  position: absolute;
  bottom: 25px;
  right: 25px;
  cursor: pointer;
}
.basemapToggleDiv:hover {
  background-color: rgb(255, 255, 255, 0.8);
}
.basemapToggleDiv img {
  width: 86px;
  height: 60px;
}
.container {
  min-width: 86px;
}
.zhezhao {
  width: 50px;
  height: 15px;
  background-color: rgb(0, 0, 0, 0.3);
  position: absolute;
  bottom: 5px;
  left: 4px;
  color: whitesmoke;
  padding-left: 6px;
  border-radius: 0 10px 0 0;
}
</style>
